<template>
    <div class="transfer">
        <!--<el-row>-->
            <!--<el-col :span="24">-->
                <!--<el-cascader-->
                        <!--:placeholder="palaceName"-->
                        <!--:options="cascaderOption"-->
                        <!--v-model="myValue"-->
                        <!--filterable-->
                        <!--style="width: 100%;"-->
                        <!--@change="changeSelect"-->
                <!--&gt;</el-cascader>-->
            <!--</el-col>-->
        <!--</el-row>-->
        <!--<van-picker-->
                <!--show-toolbar-->
                <!--:title="palaceName"-->
                <!--:columns="columns"-->
                <!--@cancel="onCancel"-->
                <!--@confirm="onConfirm"-->
                <!--@change="onChange"-->
        <!--&gt;</van-picker>-->
        <van-tree-select
                :items="transOption"
                :main-active-index="mainActiveIndex"
                :active-id="activeId"
                @navclick="onNavClick"
                @itemclick="onItemClick"
        ></van-tree-select>
    </div>
</template>

<script>
    const citys = {
        '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
        '福建': ['福州', '厦门', '莆田', '三明', '泉州']
    };
    import {Picker,Toast,TreeSelect} from 'vant';
    export default {
        components: {
            [Picker.name]: Picker,
            [TreeSelect.name]: TreeSelect,
            [Toast.name]: Toast
        },
        props: {
            palaceName: {
                type: String,
                default: ''
            },
            value: {
                type: Number,
                default: null
            },
            cascaderOption: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                columns: [
                    {
                        values: '叮咚1连',
                        className: 'column1',
                        children: [
                            {
                                values: '叮咚2连',
                                className: 'column2',
                                children: [{
                                    values: '叮咚3连',
                                    className: 'column3',
                                    children: []
                                }]
                            }
                        ]
                    }
                ],
                myValue: null,
                // 左侧高亮元素的index
                mainActiveIndex: 0,
                // 被选中元素的id
                activeId: 1
            }
        },
        mounted() {
        },
        computed: {
            transOption() {
                let keyMap = {
                    "label" : "text",
                    "value" : "id"
                };
                for(let i = 0;i < this.cascaderOption.length;i++){
                    let obj = this.cascaderOption[i];
                    for(let key in obj){
                        let newKey = keyMap[key];
                        if(newKey){
                            obj[newKey] = obj[key];
                            delete obj[key];
                        }
                    }
                    if (obj.children) {
                        for(let j = 0;j < obj.children.length;j++) {
                            let obj1 = obj.children[j];
                            for (let key in obj1) {
                                let newKey = keyMap[key];
                                if (newKey) {
                                    obj1[newKey] = obj1[key];
                                    delete obj1[key];
                                }
                            }
                            if (obj1.children) {
                                for (let j = 0; j < obj1.children.length; j++) {
                                    let obj2 = obj1.children[j];
                                    for (let key in obj2) {
                                        let newKey = keyMap[key];
                                        if (newKey) {
                                            obj2[newKey] = obj2[key];
                                            delete obj2[key];
                                        }
                                    }
                                }
                            }

                        }

                    }
                }
                console.info('this.cascaderOption;',this.cascaderOption);
                return this.cascaderOption;
            }
        },
        watch: {
            value: function (value) {
               this.myValue = this.value;
            },
            myValue: function (value) {
                    this.$emit('input', this.myValue);
            }
        },
        methods: {
            onNavClick(index) {
                this.mainActiveIndex = index;
            },
            onItemClick(data) {
                this.activeId = data.id;
            }

        }
    }
</script>

<style scoped>
    /*.transfer {*/
    /*text-align: center;*/
    /*}*/
</style>
